<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS3 文本环绕</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .shape-outside {
        width: 200px;
        height: 150px;
        border: 5px solid black;
        overflow: hidden;
    }

    .shape-outside div {
        width: 100px;
        height: 100px;
        /*border: 5px solid red;*/
        box-sizing: border-box;
        float: left;
        /*border-radius: 50%;*/
        /*圆型环绕*/
        shape-outside: polygon(0 0, 0 100px,100px 100px);
        background: blueviolet;
        clip-path: polygon(0 0, 0 100px,100px 100px);
    }

</style>
<body>
<div class="shape-outside">
  <div class=""></div>
  “犯其至难而图其至远”“积跬步以至千里”“为者常成，行者常至，历史不会辜负实干者”……每逢岁末年初，习近平总书记都会发表重要讲话，为大家送祝福、鼓干劲。在这些重要讲话中，总书记时常引经据典、援古论今，为中华传统诗文典故赋予鲜活的新时代内涵。一年之计在于春，让我们一起重温总书记那些点睛用典，共同开启新的篇章。
</div>
</body>
</html>